⏱️ Do It Now
Create a OneNote Page and copy this into the title:
Lesson 1 - Summer 1 - Introducing HTML
Copy this into OneNote and complete the questions
⏱️ Do It Now Activity |
Answer the following questions:
|
🎯 Learning Objectives
- LO1:We are learning how to create a Web Page from basic HTML elements
- LO2:We will be able to apply styles to some of the elements
⌨️ Setting Up For Today
(A) Click this link: VSCODEEDU.COM
(B) Watch this video in order to set up your project
Copy the table below into OneNote
Share your project and paste the link into the table
|
📝 Link To My Project |
|
Paste a link to your project My Website below: |
🎨 Adding some HTML Elements (1)
Remember that all of your webpage content must go between
<body>and
</body>
Go to next slide
🎨 Adding some HTML Elements (2)
Simple Rules
- Most HTML elements need an opening and a closing tag
- It is important that you use both, otherwise it confuses the web browser
The Heading Tag
There are 6 different sizes to choose from!
The example below uses heading size 3
Again, notice how there is an opening h3 and closing /h3
<h3> Content for the Heading </h3>
The Paragraph Tag
This is for general text you wish to put on your webpages
A line space will always be added after a paragraph
Again, notice how there is an opening p and closing /p
<p> Content of my paragraph </p>
Go to next slide
⌨️ CODING ACTIVITY (1)
You must now create a webpage about a topic of your choice
This topic will be the context of the website you will build over the next half term.
- Different sizes of headings
- Interesting Paragraph Text
You will 10 minutes to complete this task
🔎 Using CSS
Now you have some page content it is time to style it
In order to do this we will use CSS
Watch this video to learn how CSS styles can be applied to your page
Go to the next slide
🔎 Using CSS (2)
Feel free to apply any of these style rules to your heading text and paragraph text
Text Colour & Appearance
- color – sets the text colour
Font Styling
- font-family – sets the typeface
- font-size – sets the size of the text
- font-weight – controls boldness
- font-style – sets italic or normal text
Text Decoration
- text-decoration-line – underline, overline, line-through
- text-decoration-color – colour of decoration
- text-decoration-style – solid, dotted, dashed, wavy
- text-decoration-thickness – thickness of decoration line
Text Alignment & Layout
- text-align – left, right, center, justify
Spacing
- letter-spacing – space between letters
- word-spacing – space between words
- line-height – space between lines
Text Transformation
- text-transform – uppercase, lowercase, capitalize
Text Effects
- text-shadow – adds shadow to text
Advanced / Less Common
- text-indent – indents the first line
- direction – sets text direction (ltr, rtl)
Bonus - Page Background Colour
body{
background-color: black;
}
📝 Plenary Slide
Copy this into a OneNote Page and complete it
|
📝 Plenary Activity |
|
Answer the following questions Do each of the following:
|